<template>
  <div class="container">
    <header>
      <img src="../../assets/Application/t-07.jpg" style="width: 100%" alt="" />
    </header>
    <div class="header">
      <div class="t-icon">
        <img class="img-responsive" :src="info.in_icon" alt="" />
      </div>
      <div class="tit">{{ info.in_name }}</div>
      <div>
        <span>版本:{{ info.in_bsvs }}</span>
        <span style="margin: 0 10px 0 10px">大小:{{ info.in_size }}MB</span>
        <span>更新时间:{{ info.in_addtime }}</span>
      </div>

      <!-- :href="link" -->
      <div style="margin-top: 20px">
        <div
          class="a"
          type="primary"
          @click="appDown"
          v-if="download"
          style="cursor: pointer"
        >
          <i class="el-icon-download" style="margin-right: 3px"></i>
          下载安装
        </div>
        <div style="color: green" v-else>正在下载...</div>
      </div>

      <!-- <div style="margin-top: 10px; margin-bottom: 10px">
        适用于{{ info.in_form === 'iOS' ? '苹果' : '安卓' }}手机
      </div> -->
      <!-- 二维码 -->
      <div>
        <div class="QR">
          <canvas ref="qrcodeCanvas"></canvas>
        </div>
      </div>
      <div>扫描二维码下载</div>

      <div style="color: #2c56ff; display: flex; margin-top: 80px">
        <div
          style="margin-right: 5px"
          v-popover:popover2
          @click="dialogVisible = true"
        >
          免责声明
        </div>
        <div @click="informVisible = true">举报</div>
      </div>

      <!-- 弹框 -->
      <el-dialog title="免责声明" :visible.sync="dialogVisible" width="600">
        <template #title>
          <div style="text-align: center; font-size: 18px; color: black">
            免责声明
          </div>
        </template>
        <p>
          平台为第三方应用提供应用反馈收集等服务。应用内容均来源于第三方产品，仅为用户提供下载支持，不涉及任何人工编辑和整理，也不对任何来源于第三方的内容（包括但不限于安装包安全、信息描述、应用截图）承担责任，用户可根据描述场景谨慎选择下载试用。
        </p>
        <br />
        <p>
          任何公司、产品或者个人认为平台涉嫌侵犯您的版权或应用权，您应该及时向我们提供举报声明、书面权利通知，并提供身份证明、权属证明及侵权情况等投诉材料。我们将依法进行处理。
        </p>
        <br />

        <p>
          应用下载者与应用上传者如发生纠纷，请自行与上传者协商处理，协商无果请到相关部门进行投诉，或者拨打110警方介入，本平台不承担责任。
        </p>
      </el-dialog>

      <el-dialog title="举报" :visible.sync="informVisible" width="600">
        <template #title>
          <div style="text-align: center; font-size: 18px; color: black">
            举报
          </div>
        </template>
        <p>
          作为第三方内测分发平台，我们一直致力于打击违规应用，保护用户权益。非常感谢您的举报，我们会在第一时间安排专人处理您的举报问题。感谢您对我们的支持。
        </p>
        <hr />
        <el-form
          style="margin-top: 10px"
          :rules="rules"
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-form-item label="请选择举报类型" label-width="1" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="盗版"></el-radio>
              <el-radio label="黄色"></el-radio>
              <el-radio label="欺诈"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="举报原因" label-width="1" prop="cause">
            <el-input type="textarea" v-model="form.cause"></el-input>
          </el-form-item>
          <el-form-item label="Emaill" label-width="1" prop="emaill">
            <el-input v-model="form.emaill"></el-input>
          </el-form-item>
          <el-form-item style="display: flex; justify-content: center">
            <el-button @click="onSubmit(1)" type="text">返回下载页</el-button>
            <el-button @click="onSubmit(2)" type="primary">举报</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-dialog
      title="请输入下载码"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <el-form :model="Form">
        <el-form-item>
          <el-input v-model="Form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </div>
    </el-dialog>
    <wechat-mask></wechat-mask>
  </div>
</template>

<script>
import { appDown, dec_upload } from '@/api/App';
import QRcode from 'qrcode';
import WechatMask from '@/components/WechatMask.vue';

export default {
  components: {
    WechatMask
  },
  data() {
    return {
      Form: {
        password: ''
      },
      dialogFormVisible: false,
      equipment: null,
      download: true,
      link: '', //跳转链接
      //信息数据
      info: {},
      //上传列表
      uploadList: [],
      dialogVisible: false, //免责
      informVisible: false, //举报
      form: {
        emaill: '',
        type: '',
        cause: ''
      },
      rules: {
        emaill: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入有效的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        type: [
          { required: true, message: '请输入举报类型', trigger: 'change' }
        ],
        cause: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            min: 2,
            max: 200,
            message: '长度在 2 到 200 个字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    var userAgent = navigator.userAgent;
    if (userAgent.match(/Android/i)) {
      this.equipment = 'Android';
    } else if (userAgent.match(/iPhone|iPad|iPod/i)) {
      this.equipment = 'iOS';
    } else {
      this.equipment = 'PC';
    }
    this.getDetails(this.$route.params.id);
  },
  methods: {
    handleClose() {
      if (this.Form.password === this.info.in_apppwd) {
        this.down();
      } else {
        this.$message.error('密码错误');
        this.download = true;
      }
      this.Form.password = '';
      console.log(this.Form.password);
      this.dialogFormVisible = false;
    },
    down() {
      if (this.equipment === 'Android') {
        this.AndroidDown();
      } else if (this.equipment === 'iOS') {
        this.iOSDown();
      } else {
        this.PCDown();
      }
    },
    async Dec_upload(in_id) {
      await dec_upload({ in_id });
    },
    async AndroidDown() {
      if (this.info.in_form === 'Android') {
        await this.Dec_upload(this.info.in_id);
        window.location.href = this.info.in_app;
      } else {
        if (this.info.merge && this.info.merge.in_form === 'Android') {
          await this.Dec_upload(this.info.merge.in_id);
          window.location.href = this.info.merge.in_app;
        } else {
          this.$message.warning('请使用Android设备下载');
          this.download = true;
        }
      }
    },
    async iOSDown() {
      if (this.info.in_form === 'iOS') {
        await this.Dec_upload(this.info.in_id);
        window.location.href = `itms-services://?action=download-manifest&url=${this.info.plist}`;
      } else {
        if (this.info.merge && this.info.merge.in_form === 'iOS') {
          await this.Dec_upload(this.info.merge.in_id);
          window.location.href = `itms-services://?action=download-manifest&url=${this.info.merge.plist}`;
        } else {
          this.$message.warning('请使用iOS设备下载');
          this.download = true;
        }
      }
    },
    async PCDown() {
      await dec_upload({ in_id: this.info.in_id });
      window.location.href = this.info.in_app;
    },
    appDown() {
      this.download = false;
      this.info.in_apppwd ? (this.dialogFormVisible = true) : this.down();
    },
    //二维码
    getCanvas() {
      QRcode.toCanvas(
        this.$refs.qrcodeCanvas,
        // "https://blog.csdn.net/weixin_47886687?spm=1010.2135.3001.5113", //假二维码待替换
        `${window.location.origin}/download/${this.$route.params.id}`, //真二维码
        {
          with: 200,
          color: {
            bark: '#000',
            light: '#ffff'
          }
        }
      );
    },
    //举报
    onSubmit(num) {
      if (num === 1) {
        this.$message('取消举报');
        this.$refs.form.resetFields();
        this.informVisible = false;
      } else {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.$message({
              message: '举报成功',
              type: 'success'
            });
            this.$refs.form.resetFields();
            this.informVisible = false;
          } else {
            this.$message.info('请填写完整信息');
          }
        });
      }
    },
    async getDetails(id) {
      const { data, status, message } = await appDown(id);
      if (status === 0) {
        this.info = data;
        this.info.in_size = this.info.in_size / 1024 / 1024;
        this.info.in_size = this.info.in_size.toFixed(2);
        this.link = data.in_app;
        this.getCanvas();
      } else {
        this.$alert(message, '温馨提示', {
          confirmButtonText: '确定',
          callback: () => {
            window.location.href = 'https://www.baidu.com/';
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.a {
  border-radius: 5px;
  background-color: #2c56ff;
  width: 100px;
  display: flex;
  height: 30px;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.tit {
  font-size: 28px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.img-responsive {
  width: 105px;
  height: 105px;
  border-radius: 30px;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
}

.t-icon {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
